<template>
    <PopList :title="'在线模型切片服务'" :showButton="true" @close="close" @ok="addSceneObjects">
        <div class="images_bottom_content">
            <div class="images_servelocation">
                <label>服务地址</label>
                <!-- <input type="text" v-model="serveUrl"> -->
                <textarea v-model="serveUrl" rows="4"></textarea>
            </div>
            <div class="images_img_list">
                <div v-for="(item, index) in modellist" @click="changeServeUrl(item, index)" class="images_img_lilist">
                    <div class="images_imgposition" :class="{ 'images_checkedactive': checkedactive == index }">
                        <img :src="item.thumbnail" alt="">
                        <span v-show="iconIsShow == index ? true : false">{{ item.cnname
                            }}</span>
                    </div>
                    <div class="images_onlineimageName" @mouseenter="handleMouseEnter(index)"
                        @mouseleave="handleMouseLeave">{{
        item.cnname }}</div>
                </div>
            </div>
        </div>
    </PopList>
</template>
<script setup lang="ts">
import { Message } from "earthsdk-ui";
import { ES3DTileset } from "esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main";
import { inject, onMounted, ref } from 'vue';
import { SceneTree } from 'xbsj-xe2/dist-node/xe2';
import PopList from "../../../components/PopList.vue";
import { XbsjEarthUi } from "../../../scripts/xbsjEarthUi";
const sceneTree = inject('sceneTree') as SceneTree
const xbsjEarthUi = inject('xbsjEarthUi') as XbsjEarthUi

const serveUrl = ref()
const checkedactive = ref()
const objectname = ref()
const iconIsShow = ref()
const modellist = ref()

const emits = defineEmits(['close']);
const close = () => {
    emits("close")
}
const handleMouseEnter = (index: number) => {
    iconIsShow.value = index
}
const handleMouseLeave = () => {
    iconIsShow.value = null
}
const changeServeUrl = (item: any, index: any) => {
    serveUrl.value = item.url
    // console.log(serveUrl.value[4]);
    // if(serveUrl.value[4]=='s'){
    // }
    checkedactive.value = index
    objectname.value = item.cnname
}

//增加瓦片
const addSceneObjects = () => {
    if (!serveUrl.value) Message.warning('请选择或者输入地址');
    else if (serveUrl.value) {

        const currentTreeItem = sceneTree.lastSelectedItem
        let newTreeItem
        if (!currentTreeItem) {
            newTreeItem = sceneTree.createSceneObjectTreeItem('ES3DTileset')
        } else if (currentTreeItem?.type === 'Folder') {
            newTreeItem = sceneTree.createSceneObjectTreeItem('ES3DTileset', undefined, currentTreeItem, 'Inner')
        } else {
            newTreeItem = sceneTree.createSceneObjectTreeItem('ES3DTileset', undefined, currentTreeItem, 'After')
        }
        if (!newTreeItem) return
        sceneTree.uiTree.clearAllSelectedItems()
        newTreeItem.uiTreeObject.selected = true
        if (!newTreeItem.sceneObject) return
        if (newTreeItem.sceneObject.typeName !== 'ES3DTileset') return
        const sceneObject = newTreeItem.sceneObject as ES3DTileset
        xbsjEarthUi.propSceneTree = newTreeItem
        sceneObject.url = serveUrl.value
        newTreeItem.name = objectname.value ?? '未命名瓦片';
        emits("close")
    }
}
onMounted(() => {
    // getNoToken('https://account.bjxbsj.cn/api/onlineResouces/model?desc=false').then((res: any) => {
    //     if (res && res.result)
    //         // console.log(res);
    //     modellist.value = res.result
    // }).catch(error => {
    //     console.log(error);
    // })
})
</script>